<template>
  <div class="home app_container">
    <div class="top_count">
      <ul>
        <li v-for="item in infolist" @click="goLink(item)">
          <div class="left_icon" :style="{ backgroundColor: item.color }">
            <Icon :icon="'ant-design:' + item.icon" style="font-size: 30px"></Icon>
          </div>
          <div class="right_name">{{ item.name }}: {{ item.value }} {{ item.unit }}</div>
        </li>
      </ul>
    </div>
    <div class="ward_tree">
      <div class="tree">
        <a-tree
          :tree-data="treeList"
          @select="changeSelect"
          :fieldNames="treeFieldnames"
          v-model:selectedKeys="selectedKeys"
        >
        </a-tree>
      </div>
      <div class="right_map">
        <div class="map_list">
          <a-card
            hoverable
            class="card_item"
            v-for="item in mapList"
            @click="goMontor(item)"
            :key="item.id"
          >
            <template #cover>
              <img alt="暂无图片" :src="getFileAccessHttpUrl(item.id)" />
            </template>
            <a-card-meta :title="item.name"> </a-card-meta>
          </a-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { IResultTreeData } from "../system/dict/dict.type";
import { getCount, getTrees, getauthMaps } from "./index.api";
import { router } from "/@/router";
import { getFileAccessHttpUrl } from "/@/utils/common/compUtils.ts";
const treeList = ref<object[]>([]);
const mapList = ref<object[]>([]);
const infolist = ref({
  deptCount: {
    icon: "user-add-outlined",
    value: 0,
    name: "科室",
    unit: "个",
    color: "#f59a23",
    url: "/dep/department",
  },
  wardCount: {
    icon: "profile-outlined",
    value: 0,
    name: "病区",
    unit: "个",
    color: "#02a7f0",
    url: "/dep/ward",
  },
  patientCount: {
    icon: "team-outlined",
    value: 0,
    name: "患者",
    unit: "名",
    color: "#facd91",
    url: "/management/patient",
  },
});

const selectedKeys = ref<string>("");

const treeFieldnames = {
  children: "children",
  title: "name",
  key: "id",
};

function goLink(item) {
  router.push(item.url || "");
}

const changeSelect = (e: any, row: any) => {
  const id = e[0];
  const nodeType = row.node.nodeType;
  if (id) {
    getauthMaps({ id, nodeType }).then((res: IResultTreeData) => {
      mapList.value = res.data.entities;
    });
  }
};

const getCounts = () => {
  getCount().then((res: IResultTreeData) => {
    let data: any = res.data;
    Object.keys(data).forEach((item) => {
      infolist.value[item].value = res.data[item];
    });
  });
};
getCounts();
const getTree = () => {
  getTrees().then((res: IResultTreeData) => {
    let data: any = res.data;
    formmatData(data);
    treeList.value = data;
    // selectedKeys.value = [data[0]?.id] || "";
  });
};
function formmatData(data) {
  for (let i = 0; i < data.length; i++) {
    data[i].disabled = !data[i].hasPerm;
    if (data[i].children) {
      formmatData(data[i].children);
    }
  }
}
function goMontor(item) {
	router.push(`/allmonitor?mapId=${item.id}&wardId=${item.wardId}`)
}
getTree();
</script>
<style lang="less" scoped>
.app_container {
  padding: 20px;
  box-sizing: border-box;
  .ward_tree {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    height: 100%;
    ::v-deep(.ant-tree) {
      background: transparent;
    }

    .tree {
      width: 25%;
      .ant-tree {
        background: transparent;
      }
      .ant-tree-title {
        font-size: 18px;
      }
    }
    .right_map {
      width: 75%;
      .map_list {
        display: flex;
        flex-wrap: wrap;
        .card_item {
          width: 27%;
          min-width: 260px;
          margin-right: 20px;
          margin-bottom: 20px;
          .ant-card-cover {
            img {
              height: 170px;
            }
          }
        }
      }
    }
  }
  .top_count {
    ul {
      display: flex;
      justify-content: space-between;
      li {
        width: 23%;
        height: 100px;
        background-color: @component-background;
        transition: all 0.3s ease;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 10px;
        .left_icon {
          height: 100%;
          width: 30%;
          text-align: center;
          line-height: 100px;
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
          color: #fff;
        }
        .right_name {
          width: 70%;
          padding-left: 20px;
          font-size: 18px;
          font-weight: 600;
        }
        &:hover {
          box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),
            0 5px 12px 4px rgba(0, 0, 0, 0.09);
        }
      }
    }
  }
}
</style>
